<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="aside2List">
      <div class="asideLeft">
        <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>
        
      </div>
      <div class="aside2Left">
        <Aside2Box :aside2List="aside2List" :item2Aside="item2Aside" @handle2Aside="handle2Aside"></Aside2Box>
      </div>
      <div class="listRight">
        <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
      </div>
    </div>
  </div>
</template>

<script>
import AsideBox from '@/components/Widgets/asideBox'
import Aside2Box from '@/components/Widgets/aside2Box'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: {AsideBox,Aside2Box,ListBox},
  props: {},
  data () {
    return {
      // 侧边栏数据
      asideList:[],
      itemAside:{},
      // 二级侧边栏
      aside2List:[],
      item2Aside:{},
      // 列表数据
      dataList:[],
      itemList:{},
      className:'listImg4',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getAsideList();
    this.getAside2List();
  },
  updated () {},
  methods: {
    // 获取侧边栏数据
    getAsideList(){
      this.asideList = [
        { title:'电影',code:'111',},
        { title:'电视剧',code:'112',},
        { title:'综艺',code:'113',},
        { title:'纪录片',code:'114',},
        { title:'动漫',code:'115',},
      ]
      
      this.itemAside = this.asideList.length>0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取二级侧边栏的数据
    getAside2List(){
      let data = [
        { title:'电影',pcode:'111',
          subData:[
            { title:'喜剧', code:'1110' },
            { title:'科幻', code:'1111' },
            { title:'动作', code:'1112' },
          ]
        },
        { title:'电视剧',pcode:'112',
          subData:[
            { title:'军事', code:'1121' },
            { title:'爱情', code:'1122' },
            { title:'动画', code:'1123' },
          ]
        },
        { title:'综艺',pcode:'113',
          subData:[
            { title:'真人秀', code:'1131' },
            { title:'脱口秀', code:'1132' },
            { title:'搞笑', code:'1133' },
          ]
        },
        { title:'纪录片',pcode:'114',
          subData:[
            { title:'自然', code:'1141' },
            { title:'人物', code:'1142' },
            { title:'科技', code:'1143' },
            { title:'美食', code:'1144' },
            { title:'历史', code:'1145' },
          ]
        },
        { title:'动漫',pcode:'115',
          subData:[
            { title:'国漫', code:'1151' },
            { title:'冒险', code:'1152' },
            { title:'搞笑', code:'1153' },
            { title:'热血', code:'1154' },
            { title:'魔幻', code:'1155' },
          ]
        },
      ]
      data.forEach(item =>{
        if(this.itemAside.code == item.pcode){
          this.aside2List = item.subData;
        }
      })
      this.item2Aside = this.aside2List.length>0 ? this.aside2List[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData(){
      let listData = [
        { asideTitle:'电影',asideCode:'111',
          aside2Title:'喜剧',aside2Code:'1110',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-2.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-3.jpg')},
            {title:'阴阳画皮年少好滴哦好等哈搜狐都爱',code:'111014',imgUrl:require('@/assets/img/r-4.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-5.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
          ]
        },
        { asideTitle:'电视剧',asideCode:'112',
          aside2Title:'爱情',aside2Code:'1122',
          data:[
            {title:'爱的二八定律',code:'111111',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'我们的当打之年',code:'111112',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'你是我的荣耀',code:'111113',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'谢谢你医生',code:'111114',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'良辰美景好时光',code:'111115',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'陈情令',code:'111116',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'综艺',asideCode:'113',
          aside2Title:'脱口秀',aside2Code:'1132',
          data:[]
        },
        { asideTitle:'纪录片',asideCode:'114',
          aside2Title:'科技',aside2Code:'1143',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'阴阳画皮',code:'111014',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'动漫',asideCode:'115',
          aside2Title:'国漫',aside2Code:'1151',
          data:[
            {title:'喜剧',code:'1210',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'科幻',code:'1211',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动作',code:'1212',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'爱情',code:'1213',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动画',code:'1214',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'电影',asideCode:'111',
          aside2Title:'动作',aside2Code:'1112',
          data:[
            {title:'军旅抗战',code:'1310',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'古装历史',code:'1311',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'都市是生活',code:'1312',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'偶像爱情',code:'1313',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'青春校园',code:'1314',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
      ]
      
      let filter = (condition,data) =>{
        return data.filter(item =>{
          return Object.keys(condition).every(key =>{
            return String(item[key]).toLowerCase().includes( String(condition[key]).trim().toLowerCase() );
          })
        })
      }

      if(JSON.stringify(this.item2Aside) != '{}'){
        let data = filter({asideCode:this.itemAside.code, aside2Code:this.item2Aside.code}, listData);
        this.dataList = data.length>0 ? data[0].data : [];
      } else {
        this.dataList = [];
      }

      this.itemList = this.dataList.length>0 ? this.dataList[0] : {};
    },
     // 切换侧边栏分类
    handleAside(item){
      console.log(item);
      this.itemAside = item;
      this.getAside2List();
    },
    // 二级侧边栏切换
    handle2Aside(item){
      console.log(item);
      this.item2Aside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data){
      console.log(data);
      this.itemList = data;
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.aside2List {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;
  display: flex;
  flex-direction: row;
  .asideLeft{
    width: 125px;
    height: 100%;
  }
  .aside2Left{
    width: 135px;
    height: 100%;
  }
  .listRight{
    width: calc(100% - 260px);
    height: 100%;
  }
}
</style>
